<template>
	<view>
		<view>
			<view class="u-demo-title">热映大片</view>
			<u-swiper :list="swiperList" @click="swiperClick" :effect3d=true></u-swiper>
		</view>
		<view class="charts-box">
			<qiun-data-charts type="ring" :opts="chartOpts" :chartData="chartData"/>
		</view>
		<u-grid :col="3">
			<u-grid-item v-for="(film, index) in filmList" :key=film.id>
				<!-- for循环中,film表示装filmList取出的元素的临时变量,index表示第几个取出,:key方便组件复用 -->
				<view @click="goPlay(film.id)">
					<view>
						<image :src="'../../static/filmpics/film'+(index%9+1)+'.jpeg'" mode="aspectFill"
							style="width: 100px; height: 150px; background-color: #eeeeee;"></image>
					</view>
					<view class="u-demo-area">{{film.ming}}</view>
				</view>
			</u-grid-item>
		</u-grid>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				filmList: [],
				swiperList: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '蒹葭苍苍，白露为霜。所谓伊人，在水一方'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '溯洄从之，道阻且长。溯游从之，宛在水中央'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '蒹葭萋萋，白露未晞。所谓伊人，在水之湄'
					}
				],
				chartOpts: {
					legend: {
						show: true,
						position: "right",
						lineHeight: 25
					},
					title: {
						name: "影片数",
						fontSize: 15,
						color: "#666666"
					},
					subtitle: {
						name: "100",
						fontSize: 15,
						color: "#7cb5ec"
					},
					extra: {
						ring: {
							ringWidth: 60,
							activeOpacity: 0.5,
							activeRadius: 10,
							labelWidth: 15,
						}
					}
				},
				chartData: {},
			}
		},
		onLoad() {
			uni.request({
				url: "http://localhost:9090/dianyings",
				success: (res) => {
					this.filmList = res.data.result;
					this.chartOpts.subtitle.name = this.filmList.length;
				}
			})
			uni.request({
				url: "http://localhost:9090/leixingtongji",
				success: (res) => {
					this.chartData = {
					series: [{
						data: res.data.result,
					}]
				}
				}
			})
		},
		methods: {
			goPlay(fid) {
				uni.navigateTo({
					url: "/pages/ZYX/play?fid=" + fid,
				})
			},
			swiperClick(index) {
				console.log(index);
			},
		}
	}
</script>

<style scoped lang="scss">
	@import "@/common/demo.scss";
</style>